<template>
	<view class="text_block">
		<block v-for="(item,index) in textList" :key="index">
			<!-- <view v-if="item === '|'"></view>
			<text v-else :class="museIndex>=index?'showText':''">{{item}}</text> -->
			<view :class="museIndex>=index?'showText':''">{{item}}</view>
		</block>
	</view>
</template>

<script lang="ts" setup>
	const props = defineProps({
		text: {
			type: String,
			default: ''
		},
	})
	
	import { ref,onUnmounted } from 'vue'
	const textList = ref([])
	// 关闭动画，改为1000
	const museIndex = ref(0)
	// 使用|做断句
	const textInfo = props.text
	/** 一字一字动画的逻辑 */
	// textList.value = [...textInfo]
	// const timer = setInterval(()=>{
	// 	if(textList.value.length < museIndex.value) {
	// 		clearInterval(timer)
	// 		return false
	// 	}
	// 	museIndex.value++
	// }, 100)
	
	/* 一句一句 */
	textList.value = textInfo.split("|")
	const timer = setInterval(()=>{
		if(textList.value.length < museIndex.value) {
			clearInterval(timer)
			return false
		}
		museIndex.value++
	}, 300)
	
	onUnmounted(()=>{
		clearInterval(timer)
	})
	
</script>

<style lang="scss" scoped>
	.text_block {
		view {
			opacity: 0;
			animation-fill-mode: forwards;
		}
		.showText {
			animation: fadeIn_bottom 1s linear;
			animation-fill-mode: forwards;
			@keyframes fadeIn_bottom {
				0% {
					transform: translateX(-30rpx);
					opacity: 0;
				}
				100% {
					transform: translateX(0);
					opacity: 1;
				}
			}
		}
	}

</style>